import React from 'react';
import Draggable from 'react-draggable';
import styled from '@emotion/styled';
import { FileTextFilled } from '@ant-design/icons';
import AgentService from '@/modules/Agent';

const DraggableButton = styled.div`
	position: absolute;
	top: 30%;
	right: 0;
	cursor: move;
	z-index: 998;
	background: #001529;
	height: 40px;
	border-radius: 20px 0 0 20px;
	width: 98px;
    white-space: nowrap;
    transform: translate(0px, 0px);
    display: flex;
    justify-content: space-between;
    align-items: center;
`;

const LabelSpan = styled.span`
	font-size: 12px;
	color: #fff;
    display: inline-block;
    margin-right: 8px;
}
`;

const IconWrapper = styled.span`
	display: inline-block;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
`;

interface SummaryButtonProps {
    onClick: () => void;
}

const SummaryButton = (props: SummaryButtonProps) => {
    const { onClick } = props;

    const handleClick = () => {
        console.log('点击了会话小结按钮');
        onClick();
    }
	// && AgentService.configure.currentTab === 'sessionService'

	return (
		<Draggable axis="y" bounds="parent" >
			<DraggableButton style={{display: AgentService.configure.currentTab === 'sessionService' ? 'flex' : 'none'}}>
				<IconWrapper onClick={handleClick}>
					<FileTextFilled style={{ fontSize: '20px', color: '#001529' }} />
				</IconWrapper>
				<LabelSpan>会话小结</LabelSpan>{' '}
			</DraggableButton>
		</Draggable>
	);
};

export default SummaryButton;
